<template>

 <div id="app">
       <div class="big">
        <!-- 头部 -->
        <div class="heade">
            <div class="nav">
                <div @click="fn"><img src="../assets/img/教育APP切图/fh.png" alt="" class="fh"></div>
                <h3 style="font-size:3rem">写评论</h3>
            </div>
        </div>
        <!-- 身体 -->
        <div class="st">
            <div class="st1">
                <textarea id="pl" placeholder="吐个槽，交个朋友呗(/=￣Ω￣=)/" maxlength="300" v-model="wen"></textarea>
                <p><span class="num">0</span>/300</p>
            </div>
            <button @click="fun">提交</button>

        </div>
    </div>
    <div class="t4" v-show="show">
        <div class="tc1">
            {{text}}
        </div>
    </div>
  </div>
</template>

<script>
import {pl} from "@/api/comment"
export default {
  name: 'CommenT',
  data() {
      return {
          text:'',
          show:false,
          wen:'',
          ID:'',
          name:''
      }
  },
  methods: {
      fn(){
          this.$router.go(-1)
      },
      fun(){
          if (!this.wen.trim()) {
              this.show=true,
              this.text="评论不能为空"
              setTimeout(() => {
                  this.show=false
              }, 1000);
          }else{
            pl({
                courseId:this.ID,
                evaluate:this.wen,
                userName:this.name
            }).then(res=>{
                if(res.success==='添加评论成功'){
                    this.show=true
                    this.text=res.success
                    setTimeout(() => {
                        this.$router.go(-1)
                    }, 1000);
                }
            }).catch(err=>{
                console.log(err);
            })
          }
      }

  },
  mounted() {
      this.ID=this.$route.query.courseId
      this.name = sessionStorage.getItem("user")? JSON.parse(sessionStorage.getItem("user")).userName: ""
  }
}
</script>
<style lang="scss" scoped>
#app{
    height: 100vh;
    .big{
    .heade {
    width: 100%;
    padding: 2rem;
    background: #5064eb;
}

.nav {
    width: 40rem;
    height: 8.7rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    img {
        width: 3.7rem;
        height: 2.4rem;
    }
}


/* st */

.st {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.st1 {
    height: 60.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-end;
    padding-right: 3rem;
}

textarea {
    width: 69.8rem;
    height: 50rem;
    border: 0.1rem solid #5064eb;
    border-radius: 1.2rem;
    color: #000;
    padding: 2rem;
    font-size: 2.4rem;
}

button {
    width: 58rem;
    height: 8.8rem;
    background: #5064eb;
    color: #fff;
    border-radius: 5rem;
}

.st1 p {
    color: #b3b3b3;
    font-size: 2rem;
}
}
.t4 {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.8;
    position: fixed;
    left: 0;
    top: 0;
    .tc1 {
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 3rem;
    width: 68rem;
    height: 25rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    border-radius: 5rem;
    span {
        margin-left: 54rem;
    }
}
}
}

</style>